<template>
  <div ref="pieChart" style="width: 400px; height: 400px;"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

const pieChart = ref(null);
let chart = null;

const pieData = [
  { value: 8, name: '王芳静' },
  { value: 13, name: '赵丽娜' },
  { value: 9, name: '吴涛鹏' },
  { value: 21, name: '刘梅红' },
  { value: 18, name: '陈刚博' },
  { value: 5, name: '李强国' },
  { value: 13, name: '孙杰亮' },
  { value: 12, name: '郑军豪' },
  { value: 7, name: '黄梓涵' },
  { value: 4, name: '周芷若' },
  { value: 8, name: '陈芳玲' },
  { value: 11, name: '杨晓娟' },
  { value: 13, name: '赵雨欣' },
  { value: 7, name: '陈晓燕' },
  { value: 8, name: '刘婉婷' },
  { value: 11, name: '徐峰' },
  { value: 13, name: '赵雷' },
  { value: 9, name: '李明' },
  { value: 10, name: '陈浩' },
];

onMounted(() => {
  chart = echarts.init(pieChart.value);
  const option = {
    title: {
      text: '保洁',
      subtext: '上个月的工作处理情况',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '员工业绩',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 30,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: pieData,
      },
    ],
  };
  chart.setOption(option);
});

onBeforeUnmount(() => {
  if (chart) {
    chart.dispose();
  }
});
</script>

<style scoped>
/* 在这里添加样式，如果需要的话 */
</style>
